<template>
	<!-- 调拨列表 新建 -->
	<div class="mainContent sportnew">
		<div class="bread-nav">
			<span class="bread-item">仓储管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">调拨管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item activeNavs" @click="back">调拨入库</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">新建调拨单</span>
		</div>
		<div class="container">
			<el-row>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">确定调拨类型</p>
					</div>
				</el-row>
				<!--  -->
				<!-- 调拨单号 -->
				<el-row class="rows basic">
					<el-col :sm="12" :md="8" :lg="6">
						<div class="items" @keyup.enter="searchMore">
							<label class="label" for="">
								<img class="required" src="@/assets/img/flower_red.png" alt="">
								调拨单号
							</label>
							<el-input v-model="Model.number" placeholder="请输入内容"></el-input>
						</div>
					</el-col>
				</el-row>
				<!-- 备注 -->
				<el-row class="rows basic">
					<el-col :sm="24" :md="16" :lg="12">
						<div class="items">
							<label class="label" for="">
								备注
							</label>
							<el-input type="textarea" v-model="Model.formInline.remarks"></el-input>
						</div>
					</el-col>
				</el-row>
				<!-- 查询调拨单号信息 -->
				<el-row class="detailTable" v-if="Model.messageShow">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
			</el-row>
			<!-- ********************************************************************** -->
			<el-row class="detailTable" v-if="Model.messageShow">
				<div class="detailTableItemTitle">
					<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
					<p class="text">添加调拨商品</p>
				</div>
			</el-row>
			<div class="exports" v-if="Model.messageShow">
				<el-row>
					<el-form :inline="true" class="demo-form-inline">
						<div>
							<el-form-item label="是否手动导入">
								<el-radio-group v-model="Model.manualImport">
									<el-radio :label="true">是</el-radio>
									<el-radio :label="false">否</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item v-if="Model.manualImport">
								<el-button type="primary" @click="importMaterial">导入物料</el-button>
							</el-form-item>
						</div>
						<div v-if="!Model.manualImport" v-on:keyup.enter="codeEntry">
							<el-form-item label="">
								<el-input v-model="Model.searchCode" placeholder="请扫码入库/输入SKU"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="codeEntry">确定</el-button>
							</el-form-item>
						</div>
					</el-form>
				</el-row>
			</div>
			<div class="batchDel" v-if="Model.messageShow">
				<div class="delBtn" @click="deleteTableData">删除</div>
			</div>
			<el-table stripe v-if="Model.messageShow" :data="Model.tableData" border :row-style="selectedHighlight"
			 @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50" fixed></el-table-column>
				<el-table-column align="center" label='商品图片'>
					<template slot-scope="scope">
						<div class="scopecont">
							<el-tooltip placement="top" effect="light">
								<div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
								<img class="mainTableImg" :src="scope.row.photoUrl" alt="">
							</el-tooltip>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" v-for="(item,index) in Model.tableHeaderData" :key="item.prop" :prop="item.prop"
				 :label="item.label">
				</el-table-column>
				<el-table-column align="center" label='数量'>
					<template slot-scope="scope">
						<div class="scopecont" v-if="scope.row.isBatchNo">
							{{scope.row.mainQuantity}}
						</div>
						<div class="scopecont" v-else>
							<el-input-number v-model="scope.row.mainQuantity" :min="1" :max="10" label="数量"></el-input-number>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-row class="bottom" v-if="Model.messageShow">
				<div class="btn_group">
					<div class="btn_item" @click="onConfirmNew">确认入库</div>
					<div class="btn_item cancel" @click="cancelOrder">取消</div>
				</div>
			</el-row>
		</div>
		<!-- 导入文件 弹窗 -->
		<el-dialog :visible.sync="Model.importFileDialog" class="minDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">导入文件</div>
			</div>
			<div style="background: #fff;">
				<el-row class="common-table-con">
					<div class="fileup-cont">
						<input class="fileup" type="file" name="fileup" id="fileup" v-on:change="fileChange($event)" />
						<div class="fileup-name">{{Model.fileupName}}</div>
						<div class="fileup-btn">浏览</div>
					</div>
				</el-row>
				<el-row class="dialog-btn-group">
					<div class="dialog-btn dialog-btn-confirm" @click="uploadExcel">导入摸板</div>
				</el-row>
				<el-row>
					<p class="template-name" @click="downloadExcel()">下载调拨商品导入模板</p>
				</el-row>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";

	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "newPage",
		mixins: [Model, Controller],
		components: {
			pathTracking,
			card,
			advancedSearch
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
<style>
	.sportnew .items .el-input__inner {
		height: 100%;
	}

	.sportnew .el-input {
		height: 100%;
	}

	.sportnew .el-date-editor {
		height: 100%;
		;
	}

	.payitem .el-input {
		width: 240px;
	}

	.sportnew .el-cascader {
		width: 100%;
		height: 32px;
	}

	.sportnew .changeGoodsDialog .el-dialog {
		height: 80%;
	}

	.sportnew .confirm-dialo .el-dialog {}
</style>
